<template>
  <div style="width: 100%; height: 100%">
    <el-row style="height: 4vh; min-height: 30px">
      <el-col :span="8"> NODE的版本2：{{ Node_version }} </el-col>
      <el-col :span="8" id="getres"> 发送信息的回应：{{ sendRes }} </el-col>
      <el-col :span="8">读取的数据：{{ readData }}</el-col>
    </el-row>
    <el-divider />
    <el-divider></el-divider>
    <el-row style="height: 4vh; min-height: 40px">
      <el-col :span="2">请输入数据：</el-col>
      <el-col :span="6" style="margin-right: 20px">
        <el-input type="text" name="" id="" v-model="input"
      /></el-col>
      <el-col :span="12"
        ><el-button @click="handleClick('set')">发送数据</el-button>
        <el-button @click="handleClick('get')">读取数据</el-button>
        <el-button @click="switchNav('mysqlDataPage')">获取mysql数据</el-button>
        <el-button @click="switchNav('configPage')">配置表</el-button>
        <el-button @click="switchNav('passwordPage')">修改密码</el-button>
        <el-button @click="getButtons">获取按钮信息</el-button>
        <el-button @click="tests">测试</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row style="height: 3vh; min-height: 40px">
      <el-col :span="24">
        <el-button
          v-for="(item, index) in buttonList"
          :key="index"
          :type="activeButton === index ? 'primary' : 'default'"
          :class="activeButton === index ? 'active-btn' : ''"
          @click="switchButton(item, index)"
          >{{ item.appName }}</el-button
        >
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row style="height: 70vh; min-height: 500px">
      <component
        :is="currentPage"
        :send_data="listData"
        @operation="operation"
        class="componentStyle"
      />
    </el-row>
    <el-dialog
      v-model="middleVarStore.loginOpen"
      title=""
      width="600"
      height="400"
      draggable="true"
    >
      <loginPage></loginPage>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, markRaw } from "vue";
import axios from "axios";
import { getButton } from "@/api/user.js";
import { useMiddleVarStore } from "@/stores";
const middleVarStore = useMiddleVarStore();
import loginPage from "@/views/login/LoginPage.vue";
import configPage from "@/views/main/components/configPage.vue";
import passwordPage from "@/views/main/components/updatePassword.vue";
import mysqlDataPage from "@/views/main/components/getMysqlData.vue";
import appInfo from "@/views/main/components/appInfo.vue";
const currentPage = ref(markRaw(configPage));
const input = ref();
const Node_version = ref();
const readData = ref();
const sendRes = ref();
const tableData = ref([]);
const operation = ref(null);
onMounted(() => {
  // 接收preload的函数或变量
  // Node_version.value = window.electronAPI.NODE_VERSION;
  Node_version.value = 20.17;
});
//发送信息给electron
const handleClick = async (type) => {
  if (type == "set") {
    //发送消息给渲染进程,监听主进程的消息返回的信息
    window.electronAPI.sendValue(input.value);
    // 接收window.electronAPI.sendValue 返回的数据，通过自定义事件ipc-message
    window.addEventListener("ipc-message", (event) => {
      sendRes.value = event.detail;
    });
  } else {
    //渲染进程异步方法的处理
    window.electronAPI.fetchData("异步：" + input.value.value).then((data) => {
      console.log("来自主进程的回复:", data);
      readData.value = data;
    });
  }
};

const listData = ref([]);
// 切换窗口
const switchNav = (key) => {
  switch (key) {
    case "configPage":
      currentPage.value = markRaw(configPage);
      break;
    case "passwordPage":
      currentPage.value = markRaw(passwordPage);
      break;
    case "mysqlDataPage":
      currentPage.value = markRaw(mysqlDataPage);
      break;
    default:
      break;
  }
};
const activeButton = ref(null); // 当前激活按钮的索引
// 切换按钮监控
const switchButton = (item, index) => {
  console.log(111, item);
  // 激活按钮
  activeButton.value = index; // 设置激活的按钮索引
  currentPage.value = markRaw(appInfo);
  listData.value = [];
  listData.value.push(item);
  console.log(115, listData.value);
};
const buttonList = ref([]);
const getButtons = async () => {
  let res = await getButton();
  if (res.data.code == 200) {
    let buttonData = res.data.data;
    let list1 = [];
    Object.keys(buttonData).forEach((item) => {
      list1.push(buttonData[item]);
    });
    buttonList.value = list1;
    console.log(116, buttonList.value);
  }
};
// 获取所有按钮信息
getButtons();
const tests = async () => {
  middleVarStore.setLoginOpen(true);
  // let data = await window.electronAPI.getMysqlData();
  // if (data.code == 200) tableData.value = data.data;
  axios({
    url: "http://127.0.0.1:4000/test",
    method: "get",
  }).then((res) => {
    // console.log(res, '历史温湿度')
    // tableData.value = res.data.data
    //   console.log(32, tableData.value);
  });
};
const showDetail = () => {};
</script>

<style scoped>
el-button,
el-col {
  margin-left: 10px;
}
.componentStyle {
  width: 100%;
  height: 100%;
}
.active-btn {
  background-color: #ffbb00; /* 激活按钮的背景色 */
  color: white; /* 激活按钮的文字颜色 */
  border-color: #409eff; /* 激活按钮的边框颜色 */
}
</style>
